<template>
  <div class="map-index">
      <div class="index-header">
        <map-header :title="`${selectValue}地理标志大数据`" :address="address"/>
      </div>
      <div class="select-list-box" @click="showLevel1List = !showLevel1List">
        <span>{{ selectValue }}</span>
        <img src="img/icon_dow.png" alt=""/>
        <div v-if="showLevel1List" class="select-level1-list">
            <div
            v-for="(item, index) of options"
            :key="index + 'p'"
            class="level1-item"
            :class="{'select-active': hoverValue === item.label}"
            @mouseover="hoverSelectItem(item)"
            @click.stop="level1Click(item)"
            >
            <span>{{ item.label }}</span>
            <div v-if="item.children.length && hoverValue === item.label && showLevel2List" class="select-level2-list">
                <div
                v-for="(child, k) of item.children"
                :key="k + 'c'"
                class="level2-item"
                :class="{'select-active2': level2HoverValue === child.label}"
                @mouseover="hoverSelectItem(child)"
                @click.stop="level2Click(child)"
                >
                <span>{{ child.label }}</span>
                </div>
            </div>
            </div>
        </div>
        </div>
      <world-map v-if="tabId === 0" />
      <china-map v-if="tabId === 1" ref="chinaMap"/>
  </div>
</template>

<script>
import mapHeader from 'components/MapHeader.vue'
import worldMap from './WorldMap.vue'
import chinaMap from './ChinaMap.vue'
// @ is an alias to /src
export default {
  name: 'Index',
  components: {
    worldMap,
    chinaMap,
    mapHeader
  },
  data() {
    return {
      tabId: 0,
      showLevel1List: false,
      showLevel2List: false,
      selectValue: '世界',
      hoverValue: '世界',
      level2HoverValue: '',
      address: '北京市'
    }
  },
  watch: {
  },
  created() {
    this.options = require('@static/worldSelect.json').options
  },
  mounted() {
  },
  methods: {
    level1Click(item) {
      if (item.value === 'world') {
        this.tabId = 0
      }
      if (item.children.length) {
        this.showLevel2List = !this.showLevel2List
        return
      }
      this.selectValue = item.label
      this.$nextTick(() => {
        if (item.value === 'china') {
          this.$refs.chinaMap.update({
            type: 'china',
            name: item.label
          })
        }
      })
    },
    level2Click(child) {
      this.tabId = 1
      this.level2HoverValue = child.label
      this.selectValue = child.label
      this.showLevel1List = false
      this.showLevel2List = false
      this.$nextTick(() => {
        if (child.value === 'all') {
          this.$refs.chinaMap.update({
            type: 'china',
            name: child.label
          })
        } else {
          this.$refs.chinaMap.update({
            type: 'province',
            name: child.name,
            value: child.value
          })
        }
      })
    },
    hoverSelectItem(item) {
      // debugger
      if (item.level === 1) {
        this.hoverValue = item.label
        this.showLevel2List = true
      } else {
        this.level2HoverValue = item.label
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .map-index {
    width: 1080px;
    height: 1920px;
    overflow: scroll;
    position: relative;
    background-image: url('../../../public/img/img_bg.png');
    .select-list-box {
      cursor: pointer;
      margin: 20px 0 50px 40px;
      width: 120px;
      height: 60px;
      line-height: 60px;
      background: rgba(255,255,255,0.07);
      border: 1px solid #1ACCFF;
      box-shadow: 0px 0px 20px 0px rgba(37,227,255,0.1);
      border-radius: 8px;
      font-size: 20px;
      color: #1ACCFF;
      letter-spacing: 0;
      text-shadow: 0 0 16px rgba(0,212,255,0.65);
      font-weight: 700;
      display: flex;
      justify-content: space-around;
      align-items: center;
      position: absolute;
      z-index: 999;
      img {
        width: 14px;
        height: 8px;
      }
      .select-level1-list {
        position: absolute;
        top: 60px;
        width: 120px;
        height: 96px;
        background: #162A3E;
        border: 1px solid #1ACCFF;
        box-shadow: 0px 0px 20px 0px rgba(37,227,255,0.1);
        border-radius: 8px;
        font-size: 16px;
        z-index: 2;
        color: #fff;
        text-shadow: none;
        .level1-item {
          height: 48px;
          line-height: 48px;
        }
      }
      .select-active {
        background: rgba(0,212,255,0.2);
        span {
          font-size: 16px;
          color: #1ACCFF;
          letter-spacing: 0;
          text-shadow: 0 0 16px rgba(0,212,255,0.65);
          opacity: 1;
          font-weight: 700;
        }
      }
        .select-level2-list {
          position: absolute;
          left: 120px;
          width: 120px;
          height: 200px;
          background: #162A3E;
          border: 1px solid #1ACCFF;
          box-shadow: 0px 0px 20px 0px rgba(37,227,255,0.1);
          border-radius: 8px;
          font-size: 16px;
          z-index: 2;
          color: #fff;
          text-shadow: none;
          overflow-y: scroll;
          top: 48px;
          .level2-item {
            span {
              color: #fff;
            }
          }
          .select-active2 {
            background: rgba(0,212,255,0.2);
            span {
              font-size: 16px;
              color: #1ACCFF;
              letter-spacing: 0;
              text-shadow: 0 0 16px rgba(0,212,255,0.65);
              opacity: 1;
              font-weight: 700;
            }
          }
        }
    }
  ::-webkit-scrollbar-thumb:horizontal
    {
      border-radius: 10px;
      background-color: #1ACCFF;
    }
    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: #1ACCFF;
    }
  }
</style>
